<template>
  <div>
    <el-container>
      <el-aside>aside</el-aside>
      <el-container>
        <el-header>header</el-header>
        <el-main>main</el-main>
        <el-footer>footer</el-footer>
      </el-container>
    </el-container>

    <el-container>
      <el-header>hearder</el-header>
      <el-container>
        <el-aside>aside</el-aside>
        <el-container>
          <el-main>main</el-main>
          <el-footer>footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
    <i class="el-icon-loading"></i>
    <!--
    type:类型
    size:尺寸（medium > small > mini）
    plain:朴素按钮
    round:圆角按钮
    circle:圆形按钮
    loading:加载按钮
    icon:图标按钮
    disabled:禁用按钮
    -->
    <el-button-group>
      <el-button>默认</el-button>
      <el-button type="primary" plain>主要</el-button>
      <el-button type="info" round>信息</el-button>
      <el-button type="warning" circle icon="el-icon-warning">警告</el-button>
      <el-button type="danger">危险</el-button>
    </el-button-group>
    <el-button type="success" icon="el-icon-check" circle></el-button>
    <el-button type="info" icon="el-icon-message" circle></el-button>
    <el-button type="warning" icon="el-icon-star-off" circle></el-button>
    <el-button type="danger" icon="el-icon-delete" circle></el-button>
    <el-button type="primary" :loading="true">加载中</el-button>
    <h3>文字链接</h3>
    <!-- type 类型-->
    <el-link href="https://www.apple.com/" target="_blank">点我打开苹果官网</el-link>
    <el-link type="primary">文字链接</el-link>
    <el-link type="info">文字链接</el-link>
    <el-link type="warning">文字链接</el-link>
    <el-link type="danger">文字链接</el-link>
    <el-link type="success">文字链接</el-link>
    <h3>复选框</h3>
    <el-checkbox v-model="checkAll" :indeterminate="isindeterminate" @change="checkAllChange">全选</el-checkbox>
    <el-checkbox-group v-model="checkedCity" @change="checkedCityChange">
      <el-checkbox v-for="city in checkList" :key="city" :label="city">{{city}}</el-checkbox>
    </el-checkbox-group>
    <h3>输入框</h3>
    <el-autocomplete v-model="inputVal" placeholder="请输入内容:" :fetch-suggestions="querySearch" @select="handleSelect">

    </el-autocomplete>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        inputData: [{
            "value": "豪大大香鸡排超级奶爸",
            "address": "上海市嘉定区曹安公路曹安路1685号"
          },
          {
            "value": "茶芝兰（奶茶，手抓饼）",
            "address": "上海市普陀区同普路1435号"
          },
          {
            "value": "十二泷町",
            "address": "上海市北翟路1444弄81号B幢-107"
          },
          {
            "value": "星移浓缩咖啡",
            "address": "上海市嘉定区新郁路817号"
          },
          {
            "value": "阿姨奶茶/豪大大",
            "address": "嘉定区曹安路1611号"
          },
          {
            "value": "新麦甜四季甜品炸鸡",
            "address": "嘉定区曹安公路2383弄55号"
          },
        ], //存放输入返回的数据
        inputVal: '',
        checkAll: false,
        isindeterminate: true,
        checkList: ['株洲', '岳阳', '上海', '北京', '长沙'],
        //默认选中值
        checkedCity: ['株洲', '岳阳']
      }
    },
    components: {

    },
    methods: {
      querySearch(query, callback) {
        console.log(query);
        var inputData = this.inputData;
        var results = query ? inputData.filter(this.createFilter(query)) : inputData;
        callback(results);
      },
      createFilter(query) {
        return (inputData) => {
          return (inputData.value.toLowerCase().indexOf(query.toLowerCase()) > -1);
        }
      },
      handleSelect(value) {
        console.log(value);
      },
      checkAllChange(value) {
        if (value) {
          this.checkedCity = this.checkList;
        } else {
          this.checkedCity = [];
        }
        this.isindeterminate = false;
        /* this.checkedCity=value?this.checkList:[];
        this.isindeterminate=false */
      },
      checkedCityChange(value) {
        //反选
        let checkedCount = value.length;
        /* if (value.length == this.checkList.length) {
          this.checkAll = true;
        } else {
          this.checkAll = false;
        }
        if (checkedCount > 0 && checkedCount < this.checkList.length) {
          this.isindeterminate = true;
        } else {
          this.isindeterminate = false;
        } */
        this.checkAll = checkedCount == this.checkList.length;
        this.isindeterminate = checkedCount > 0 && checkedCount < this.checkList.length;
      }
    }
  }
</script>

<style>
  .el-container {
    text-align: center;
  }

  .el-header,
  .el-footer {
    background-color: #D8BFD8;
    /* text-align: center; */
    line-height: 60px;

  }

  .el-aside {
    background-color: #ADD8E6;
    /* text-align: center; */
    line-height: 200px;
  }

  .el-main {
    background: #FFDAB9;
    /* text-align: center; */
    line-height: 160px;
  }
</style>
